<template>
    <div class='tinymce-div'>
        <h1>TinyMCE Quick Start Guide</h1>
        <form method="post">
            <textarea id="mytextarea">Hello, World!</textarea>
        </form>
        <button @click='getHtml'>获取html</button>

        <!--内联配置-->
        <div class='myeditor-div' style='width:100%;height:200px;'>div1</div>
        <div class='myeditor-div' style='width:100%;height:200px;'>div2</div>
    </div>
    
</template>

<script>
export default{
    data(){
        return {
            imgConfig: {
                maxSize: 2097152,  //上传尺寸不能超过2MB
                accept: 'image/jpeg, image/png', //可以接受的图片格式
            }
        }
    },
    mounted(){
        this.tinymceInit();
        this.tinymceInit2();
    },
    methods: {
        //文本框初始化
        tinymceInit(){
            var that = this;
            tinymce.init({
                selector: '#mytextarea',
                plugin: 'a_tinymce_plugin',
                a_plugin_option: true,
                a_configuration_option: 400,
                /**设置编辑器的宽高
                width: 200,
                height: 300,**/
                /**隐藏状态栏 
                * 使用户不能更改可编辑区域的大小
                statusbar: false,
                **/
                
                /**查看源代码时候弹出框的宽高
                code_dialog_height: 200,
                code_dialog_width: 350,**/
                //配置宽高
                /* width: 600,
                height: 300, */
                //配置主题颜色
                /* theme: 'modern', */
                //插件选择
                media_live_embeds: true,
                plugins: ['advlist autolink lists link image charmap preview hr anchor pagebreak', 
                    'wordcount visualblocks visualchars code fullscreen', 
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'paste textcolor colorpicker textpattern imagetools toc emoticons hr codesample'
                ],
                language_url: '/dist/libs/js/zh_CN.js',  //语言
                //菜单栏
                /* menu: {
                    view: {

                    }
                }, */
                //工具选项栏
                toolbar: [
                    'insertfile | formatselect | bold italic subscript superscript strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image'
                ],
                //图像上传配置

                images_upload_handler: function (blobInfo, success, failure) {
                    //console.log(blobInfo,blobInfo.blob());,也可以转为base64，blobInfo对象里有base64方法
                    if (blobInfo.blob().size > that.imgConfig.maxSize) {
                        failure('文件体积过大');
                        return;
                    };
                    if (that.imgConfig.accept.indexOf(blobInfo.blob().type) == -1) {
                        failure('图片格式错误');
                        return;
                    };
                    //开始上传图片
                    var formData = new FormData();
                    formData.append('img',blobInfo.blob());
                    $.ajax({
                        url: 'http://localhost:8003/upload',
                        data: formData,
                        contentType:false,
                        processData:false,
                        type:'post',
                        success: function(res){
                            console.log(res);
                            if(res.msg=='OK'){
                                //抛出'on-upload-success' 钩子
                                success(res.imgAddress);
                            }else{
                                // 抛出 'on-upload-fail' 钩子
                                failure('上传失败: ' + res.status)
                                return;
                            }
                        }
                    });

                }   
            });
        },
        //内联共享配置
        tinymceInit2(){
            tinymce.init({
                selector: '.myeditor-div',
                plugin: 'a_tinymce_plugin',
                a_plugin_option: true,
                a_configuration_option: 400,
                inline: true,
                //配置宽高
                /* width: 600,
                height: 300, */
                //配置主题颜色
                /* theme: 'modern', */
                //插件选择
                plugins: ['advlist autolink lists link image charmap preview hr anchor pagebreak', 
                    'wordcount visualblocks visualchars code fullscreen', 
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'paste textcolor colorpicker textpattern imagetools toc emoticons hr codesample'
                ],
                language_url: '/libs/js/zh_CN.js',  //语言
                //菜单栏
                /* menu: {
                    view: {

                    }
                }, */
                //工具选项栏
                toolbar: [
                    'formatselect | bold italic subscript superscript strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image'
                ]
            });
        },
        //获取富文本框中的内容
        getHtml(){
            var iframe = document.querySelector('#mytextarea_ifr');
            var bodyHTML = iframe.contentWindow.document.body.innerHTML;
            console.log(bodyHTML)
        }
    }
}
</script>

<style lang="">
    
</style>